<template>
  <div class="content-management">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>内容管理</span>
          <div class="header-actions">
            <el-input
              v-model="searchText"
              placeholder="搜索文章标题"
              style="width: 200px; margin-right: 10px;"
              clearable
              @keyup.enter="handleSearch"
            >
              <template #append>
                <el-button @click="handleSearch">
                  <el-icon><Search /></el-icon>
                </el-button>
              </template>
            </el-input>
            <el-button type="primary" @click="handleCreate">
              <el-icon><Plus /></el-icon>
              新建文章
            </el-button>
            <el-button @click="handleFileManager">
              <el-icon><Folder /></el-icon>
              文件管理
            </el-button>
            <el-button @click="handleRefresh">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </div>
      </template>
      
      <el-table :data="contentList" v-loading="loading" stripe>
        <el-table-column prop="coverImage" label="封面" width="100" align="center">
          <template #default="scope">
            <el-image
              :src="scope.row.coverImage"
              fit="cover"
              style="width: 60px; height: 40px; border-radius: 4px;"
              :preview-src-list="[scope.row.coverImage]"
              preview-teleported
            >
              <template #error>
                <div class="image-slot">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
          </template>
        </el-table-column>
        
        <el-table-column prop="title" label="文章标题" min-width="200" show-overflow-tooltip />
        
        <el-table-column prop="category" label="分类" width="120">
          <template #default="scope">
            <el-tag size="small">{{ scope.row.category }}</el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="author" label="作者" width="120" />
        
        <el-table-column prop="viewCount" label="阅读量" width="100" align="center">
          <template #default="scope">
            <el-tag type="info">{{ scope.row.viewCount || 0 }}</el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'published' ? 'success' : 'warning'">
              {{ scope.row.status === 'published' ? '已发布' : '草稿' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template #default="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="handlePreview(scope.row)">
              预览
            </el-button>
            <el-button size="small" type="primary" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button 
              size="small" 
              :type="scope.row.status === 'published' ? 'warning' : 'success'"
              @click="handleToggleStatus(scope.row)"
            >
              {{ scope.row.status === 'published' ? '下线' : '发布' }}
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Plus, Refresh, Folder, Picture } from '@element-plus/icons-vue'

const contentList = ref([])
const loading = ref(false)
const searchText = ref('')
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)

// 模拟数据
const mockContent = [
  {
    _id: '1',
    title: '优AI文化活动月精彩回顾',
    category: '活动回顾',
    author: '管理员',
    viewCount: 256,
    status: 'published',
    coverImage: 'https://via.placeholder.com/60x40',
    createTime: '2024-01-01T00:00:00.000Z'
  },
  {
    _id: '2',
    title: '新学期文化活动计划发布',
    category: '通知公告',
    author: '管理员',
    viewCount: 189,
    status: 'published',
    coverImage: 'https://via.placeholder.com/60x40',
    createTime: '2024-01-02T00:00:00.000Z'
  },
  {
    _id: '3',
    title: '文化节筹备工作进展',
    category: '工作动态',
    author: '编辑',
    viewCount: 0,
    status: 'draft',
    coverImage: 'https://via.placeholder.com/60x40',
    createTime: '2024-01-03T00:00:00.000Z'
  }
]

const getContentList = async () => {
  loading.value = true
  try {
    // 这里应该调用实际的API
    // const result = await CloudBaseAPI.getContentList(currentPage.value, pageSize.value, searchText.value)
    
    // 模拟API调用
    setTimeout(() => {
      contentList.value = mockContent
      total.value = mockContent.length
      loading.value = false
    }, 500)
  } catch (error) {
    ElMessage.error('获取内容列表失败')
    loading.value = false
  }
}

const handleSearch = () => {
  currentPage.value = 1
  getContentList()
}

const handleRefresh = () => {
  searchText.value = ''
  currentPage.value = 1
  getContentList()
}

const handlePageChange = () => {
  getContentList()
}

const handleSizeChange = () => {
  currentPage.value = 1
  getContentList()
}

const handleCreate = () => {
  ElMessage.info('新建文章功能开发中...')
}

const handleEdit = (content) => {
  ElMessage.info('编辑文章功能开发中...')
}

const handlePreview = (content) => {
  ElMessage.info('预览文章功能开发中...')
}

const handleToggleStatus = (content) => {
  ElMessage.info('切换文章状态功能开发中...')
}

const handleDelete = (content) => {
  ElMessage.info('删除文章功能开发中...')
}

const handleFileManager = () => {
  ElMessage.info('文件管理功能开发中...')
}

const formatDate = (dateStr) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN')
}

onMounted(() => {
  getContentList()
})
</script>

<style scoped>
.content-management {
  padding: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 14px;
}
</style>
